<template>
	<div style="background-color:rgba(0,0,0,0.1)">
		<!-- 头像 -->
		<div class="zuiwidth" style="padding:10px 0px 10px 0px;">
			<ul class="list2">
				<li>
					<img src="../../../public/img/img-3d9ddd55f5c297e5434174e69158b067.jpg">
				</li>
				<li style="padding-left:10px;">
					{{name}}
				</li>
				<li>
					联系客服
				</li>
			</ul>
		</div>
		<div style="background-color: white;">
			<p>基本信息</p>
			<ul class="list-group zuiwidth">
				<li class="list-group-item zuiborder" style="border-top:1px solid rgba(0,0,0,0.15)">
					<ul class="list">
						<li>真实姓名</li>
						<li>{{name}}</li>
					</ul>
				</li>
				<li class="list-group-item zuiborder">
					<ul class="list">
						<li>身份证</li>
						<li>{{idcard}}</li>
					</ul>
				</li>
				<li class="list-group-item zuiborder">
					<ul class="list">
						<li>职位</li>
						<li>{{position}}</li>
					</ul>
				</li>
				<li class="list-group-item zuiborder">
					<ul class="list">
						<li>电话号码</li>
						<li>{{tel}}</li>
					</ul>
				</li>
				<li class="list-group-item zuiborder">
					<ul class="list">
						<li>账号</li>
						<li>{{tel}}</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: "employee_person",
		data() {
			return {
				name: "",
				idcard: 420984199911184417,
				position: "促销员",
				tel: 18483628931
			}
		},
    mounted(){
      var obj=JSON.parse(window.localStorage.getItem("logined"))
      this.name=obj.username
    }

	}
</script>

<style scoped="scoped">
	ul,
	li,
	p {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	img {
		border: none;
		margin: 0;
		padding: 0;
		width: 100%;
		display: block;
		border-radius: 50%;
	}

	p {
		line-height: 40px;
		color: red;
		font-size: 14px;
		padding-left: 5%;
	}

	.list {
		display: flex;
		width: 100%;
	}

	.list li:nth-child(1) {
		width: 40%;
	}

	.list li:nth-child(2) {
		width: 60%;
	}


	.zuiwidth {
		line-height: 40px;
		width: 90%;
		margin: 0 auto;
		left: 0;
		right: 0;
	}

	.zuiborder {
		border-left: none;
		border-right: none;
		border-top: none;
	}

	.list2 {
		display: flex;
		justify-content: center;
		line-height: 60px;
	}

	.list2 li:nth-child(1) {
		width: 20%;
	}

	.list2 li:nth-child(2) {
		width: 50%;
	}

	.list2 li:nth-child(3) {
		width: 30%;
		color: red;
		font-size: 14px;
	}
</style>
